<template>
	<view class="page">
		<image class="logo" :src="logoObj.logo_other"></image>
		<view class="box">
			  <u--input
				:disabled="true"
				disabledColor="#ffffff"
			    border="surround"
			    v-model="phone"
			  ></u--input>
			  <u-gap height="40"></u-gap>
			  <u-input
			    placeholder="请输入新密码"
			    border="surround"
			    :password="isShowPasswrod ? true: false"
			    v-model="newPassword"
			  />
			  <u-gap height="40"></u-gap>
			<u-input
			  placeholder="验证码"
			  border="surround"
			  v-model="code"
			>
			<template slot="suffix">
				<u-code
					ref="uCode"
					@change="codeChange"
					seconds="60"
					changeText="X秒重新获取"
				></u-code>
				<u-button
					@click="getCode"
					:text="tips"
					color="#FC2422"
					type="error"
					size="mini"
					:customStyle="{
						paddingLeft: '10rpx',
						paddingRight: '10rpx',
						height: '60rpx'
					}"
					></u-button>
			</template>
			</u-input>
			<u-gap height="80"></u-gap>
			<u-button text="重置密码" color="#FC2422" @tap="onSubmit"></u-button>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {getLoginApi, getPhoneCodeApi,getPhoneApi,setPasswordApi} from '@/api/user.js'
	export default {
		computed: {
			...mapState(['user_id','token'])
		},
		data() {
			return {
				logoObj: {},
				isShowPasswrod: false,
				newPassword: '',
				tips: '',
				phone: '',
				code: ''
			};
		},
		onLoad({logo}) {
			this.getPhone()
			this.getLoginData()
		},
		methods: {
			async getPhone() {
				const res = await getPhoneApi({
					user_id: this.user_id
				})
				this.phone = res.data.mobile_phone
			},
			async onSubmit() {
				// 判空
				if(!this.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
					return
				}
				if(!this.code) {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					})
					return
				}
				if(this.code < 4) {
					uni.showToast({
						title: '验证码错误',
						icon: 'none'
					})
					return
				}
				const res = await setPasswordApi({
					user_id: this.user_id,
					token: this.token,
					mobile: this.phone,
					passData: this.newPassword,
					verCode: this.code
				})
				if(!res.data.res) {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
				uni.showToast({
					title: '修改成功!'
				})
				setTimeout(() => {
					uni.navigateBack()
				},300)
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if(this.$refs.uCode.canGetCode) {
					const res = await getPhoneCodeApi({
						mobile: this.phone
					})
				}
				this.$refs.uCode.start();
			},
			async getLoginData() {
				const res = await getLoginApi()
				this.logoObj = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: calc(100vh - 44px);
	.logo {
		width: 400rpx;
		height: 200rpx;
	}
	.box {
		margin-top: 20rpx;
		width: 100%;
	}
}
</style>
